import { defineComponent, computed } from 'vue'
import { ICON_NAMES } from 'amtf/constants'
import { getValByUnit, 拼组件名 } from 'amtf/utils'
const 主名 = 'icon'
const 组件名 = 拼组件名(主名)

export default defineComponent({
  name: 组件名,

  props: {
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: null,
    },
    size: {
      type: [Number, String],
      default: '',
    },
  },

  setup(props) {
    const { color, size, name } = props

    // Computed property for icon style
    const iconStyle = computed(() => {
      return {
        color: color,
        fontSize: getValByUnit(size), // CSS property in camelCase
      }
    })

    // Computed property for icon class
    const iconClass = computed(() => {
      if (!Object.values(ICON_NAMES).includes(name)) {
        console.error(`${name} is not found in ${COMPONENT_NAME}.`)
      }
      return `iconfont-vet icon-vet-${name}`
    })
    // console.log(`iconStyle.value 👉`, iconStyle.value)
    return () => (
      <>
        <i style={iconStyle.value} class={['ve-icon', iconClass.value]} />
      </>
    )
  },
})
